<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Amaze UI Admin table Examples</title>
  <meta name="description" content="这是一个 table 页面">
  <meta name="keywords" content="table">
  <% include("/common/inc/_css.html"){} %>
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->
<% include("/common/inc/_header.html"){} %>
<div class="am-cf admin-main">
  <!-- sidebar start -->
 <% include("/common/inc/_menu.html"){} %>
  <!-- sidebar end -->

  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">表格</strong> / <small>Table</small></div>
      </div>

      <hr>

      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
          <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
              <a href="${ctxPath}/product/list" class="am-btn am-btn-default">返回产品页面</a>
              <a href="${ctxPath}/product/saveType" class="am-btn am-btn-default"><span class="am-icon-plus"></span>新增产品类别</a>
               <button type="button" onclick="deleteCustomer()" class="am-btn am-btn-default" onclick="deleteCustomer()"><span class="am-icon-trash-o"></span>批量删除</button>
             
               
            </div>
          </div>
        </div>
       
        <div class="am-u-sm-12 am-u-md-3">
          <div class="am-input-group am-input-group-sm">
            <input type="text" class="am-form-field" id="typeName"/>
          <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button" id="btnSelect">搜索</button>
          </span>
          </div>
        </div>
      </div>

      <div class="am-g">
        <div class="am-u-sm-12">
          <form class="am-form">
            <table class="am-table am-table-striped am-table-hover table-main">
              <thead>
              <tr>
                <th class="table-check"><input type="checkbox" /></th><th class="table-id">序号</th><th class="table-title">类别名称</th>
                <th class="table-set">操作</th>
              </tr>
              </thead>
              <tbody>
              <%
              for(var item in list.list!){%>
               <tr>
                <td><input type="checkbox" value="${item.id}" name="typeId" class="box"/></td>
                <td>${itemLP.index}</td>
                <td>${item.typeName}</td>
                <td>
                  <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                      <a href="${ctxPath}/product/updateType/${item.id}"class="am-btn am-btn-default am-btn-xs am-text-secondary am-hide-sm-only"><span class="am-icon-copy"></span>编辑</a>
                    </div>
                  </div>
                </td>
              </tr>
             <%}%>
       </tbody>
            </table>
            <% 
             var curUrl = ctxPath + "/product/listType";
             include("/common/inc/_page.html",{pageUrl:curUrl}){}              
             %>
            <hr />
            <p>注：.....</p>
          </form>
        </div>

      </div>
    </div>

    <footer class="admin-content-footer">
      <hr>
      <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </footer>

  </div>
  <!-- content end -->
</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
<!-- 删除提示 -->
		<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">删除提示</div>
				<div class="am-modal-bd">你，确定要删除这条记录吗？</div>
				<div class="am-modal-footer">
					<span class="am-modal-btn" data-am-modal-cancel>取消</span> <span
						class="am-modal-btn" data-am-modal-confirm>确定</span>
				</div>
			</div>
		</div>
		
		<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
<!-- 删除提示 -->
		<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm-box">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">删除提示</div>
				<div class="am-modal-bd" id="msg"></div>
				<div class="am-modal-footer">
					<span class="am-modal-btn" data-am-modal-cancel>取消</span> <span
						class="am-modal-btn" data-am-modal-confirm>确定</span>
				</div>
			</div>
		</div>

		<footer>
			<hr>
			<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed
				under MIT license.</p>
		</footer>

<footer>
  <hr>
  <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
</footer>
<% include("/common/inc/_js.html"){} %>
<script src="${ctxPath}/assets/layer/layer.js"></script>
<script type="text/javascript">
function deleteCustomer() {
	var ids = $("input[name='typeId']:checked");//获取复选框的值
	var idsArr = new Array();//创建数组
	var idsStr = "";
	var msg = 0;
	$.each(ids, function(index, item) {
		idsArr.push(item.value);//给数组添加值
		idsStr += item.value + ",";//把数组转化为字符串
		msg++;
	})
	$("#msg").html("你，确定要删除这"+msg+"条记录吗？");
	
	console.log(idsStr);//页面控制台打印字符串
	$('#my-confirm-box').modal({
		relatedTarget : this,
		onConfirm : function(options) {
			$.ajax({
				url : '${ctxPath }/product/deleteType',
				data : idsStr,//把前台数据传到后台
				type : 'DELETE',
				success : function() {
					window.location.reload(); //刷新页面

				}
			})
		},
	});
}

</script>
<script type="text/javascript">
$(function(){
	$("#btnSelect").click(function(){
		var typeName=$("#typeName").val();
		
		window.location.href="${ctxPath}/product/listType?typeName="+typeName;
	})
})
</script>
</body>
</html>
